<template>
    <v-container class="my-7 pa-auto">
      <v-form
        ref="form"
        v-model="valid"
        lazy-validation
        @submit='submit'
      >
      <div
        v-for='(items,index) in question'
        :key="index"
      >
        <div
          v-for='item in items.question_list'
          :key='item.qid'
          class="ml-6 mt-6"
        >
          <v-row class="mb-2">{{item.qnum}}.{{item.qtext}}</v-row>
          <!-- 如果选项长度大于4 -->
          <div v-if="item.options">
            <div v-if="item.options.length >= 4">
              <v-radio-group
                v-if="item.qtype=='radio'"
                :id="item.qid"
                :required='item.required'
                v-model="item.answer"
              >
                <v-row no-gutters>
                  <v-col
                    cols="4"
                    sm="6"
                    md="12"
                    v-for='option in item.options'
                    :key='option.id'
                    class="my-2"
                  >
                    <div
                      style="display:flex"
                      v-if="option.text=='其他'"
                      class="ml-3"
                    >
                      <v-radio
                        :label="option.text"
                        :value="option.text"
                        :id="item.qid"
                      ></v-radio>
                      <v-text-field
                        style="width:20px"
                        height="16"
                        dense
                        @mousedown="other_fill(item)"
                      ></v-text-field>

                    </div>
                    <!-- 如果选项不是'其他' -->
                    <div v-else>
                      <v-radio
                        class="ml-3"
                        :label="option.text"
                        :value="option.text"
                      ></v-radio>
                    </div>

                  </v-col>
                </v-row>
              </v-radio-group>
              <!-- 多选框 -->
              <div v-if="item.qtype=='checkbox'">
                <v-row>
                  <v-col
                    v-for="option in item.options"
                    :key="option.id"
                    cols="6"
                    sm="3"
                  >
                    <v-row
                      style="display:flex"
                      v-if="option.text=='其他'"
                      class="ml-3"
                    >
                      <v-checkbox
                        v-model="item.answer"
                        :label="option.text"
                        :value="option.text"
                        dense
                      ></v-checkbox>
                      <v-text-field
                        style="width:20px"
                        @mousedown="other_fill(item)"
                      ></v-text-field>
                    </v-row>
                    <v-row v-else>
                      <v-checkbox
                        :label="option.text"
                        :value="option.text"
                        hide-details
                        class="ml-6"
                        dense
                      >
                      </v-checkbox>
                    </v-row>
                  </v-col>
                </v-row>
              </div>
            </div>
            <div v-else>
              <!--如果选项长度不是大于4 -->
              <!-- 如果类型是单选 -->
              <v-radio-group
                v-if="item.qtype=='radio'"
                :required='item.required'
              >
                <div
                  v-for='option in item.options'
                  :key='option.id'
                  class="my-2"
                >
                  <div
                    style="display:flex"
                    v-if="option.text=='其他'"
                    class="ml-3"
                  >
                    <v-radio
                      :label="option.text"
                      :value="option.text"
                      :id="item.qid"
                    ></v-radio>
                    <v-text-field
                      style="width:20px"
                      height="16"
                      dense
                      @mousedown="other_fill(item)"
                    ></v-text-field>
                  </div>
                  <v-radio
                    v-else
                    :key='option.id'
                    :label="option.text"
                    :value="option.text"
                    class="ml-3"
                  ></v-radio>
                </div>

              </v-radio-group>
              <!-- 多选框 -->
              <div
                v-if="item.qtype=='checkbox'"
                class="mt-6"
              >
                <div
                  v-for="option in item.options"
                  :key="option.id"
                >
                  <v-row
                    v-if="option.text=='其他'"
                    class="ml-6"
                  >
                    <v-checkbox
                      :label="option.text"
                      :value="option.text"
                      hide-details
                    ></v-checkbox>
                    <v-text-field
                      style="width:20px"
                      @mousedown="other_fill(item)"
                    ></v-text-field>
                  </v-row>
                  <v-checkbox
                    v-else
                    :label="option.text"
                    :value="option.text"
                    hide-details
                    class="ml-6"
                  >
                  </v-checkbox>
                </div>
              </div>
            </div>
          </div>
          <!-- 填空题 -->
          <div v-if="item.qtype=='text'">
            <v-textarea
              outlined
              full-width
              label="请输入"
              :required="item.required"
              :rules="textRules"
              v-model="item.anwser"
            ></v-textarea>
          </div>
        </div>
      </div>
      <v-row style="height:200px">
        <v-row
          align="center"
          justify="center"
        >
          <v-btn
            width="150px"
            @click="validate"
            :disabled="!valid"
            color="success"
          >提交</v-btn>
        </v-row>
      </v-row>
    </v-form>
  </v-container>

</template>

<script>
import axios from 'axios';
let pk = 'test-2017-survey-123';
let BASE_URL = 'http://localhost:8000/';
export default {
  // props: ['pk'],
  data() {
    return {
      question: [],
      valid: true,
      textRules: [
        v => !!v || 'Text is required'
      ]
    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
      let that = this;
      axios({
        method: 'get',
        url: BASE_URL + 'survey/' + pk,
      }).then(
        function (res) {
          let question_list = res.data.question_list;
          let survey_name = res.data.survey_name;
          question_list.forEach(item => {
            // question.answer = answer
            // answer为新添加的属性
            that.$set(item, 'answer', "")
            if (item.fill_others) {
              item.options.push({ id: item.qid + '-99', text: "其他"})
            }
          })

          that.question.push(res.data);
        }
      )
        .catch(error => console.log(error));
    },
    other_fill(item) {
      //  document.getElementById('other').value=n.text
      item.answer = '其他'
    },
    validate() {
      this.$refs.form.validate()
    },
    submit() {
      this.validate();
      axios({
        method: 'POST',
        url: BASE_URL + 'survey/' + pk,
      }).then(
        function (res) {
          let question_list = res.data.question_list;
          let survey_name = res.data.survey_name;
          question_list.forEach(item => {
            // question.answer = answer
            // answer为新添加的属性
            that.$set(item, 'answer', "")
            if (item.fill_others) {
              item.options.push({ id: item.qid + '-99', text: "其他"})
            }
          })

          that.question.push(res.data);
        }
      ).catch(error => console.log(error));
    }

  }

}
</script>